<style>
    .title{color:#FFF;border-bottom:none;}
    .layui-card-header .layui-badge{background:none;color:#FFF;font-size:16px;}
    .layui-card1{border-radius:6px;color:#FFF !important;}
    .layuiadmin-card-list p.layuiadmin-big-font{color:#FFF;text-align:center;margin-bottom:15px;}
    .layuiadmin-card-list p:nth-child(2){font-size:16px;color:#FFF;}
    .first{background:#7fd062;margin:0 15px;}
    .second{background:#fbbe1f;margin:0 15px;}
    .third{background:#ff7347;margin:0 15px;}
    .forth{background:#40a5ed;margin:0 15px;}
    .layui-table-header .layui-table tr{background:#f0f4f5;color:#6c819e;}
    .layui-table-total .layui-table{color:#f87470;}
    table th a{color:#6c819e;}
</style>
<div class="layui-tab-content">
    <form onsubmit="return false" class="layui-fluid" id="search_form">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="time_range"  value="{$current_month} ~ {$next_month}" placeholder="时间范围" autocomplete="off" class="layui-input" readonly id="pay_range">
                    </div>
                    <div class="layui-inline">
                        <select name="belong_type" class="layui-select">
                            <option value="">客户类型</option>
                            {foreach $alias['belong_type_alias'] as $k => $v}
                            <option value="{$k}">{$v}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list layui-btn-primary" lay-submit lay-filter="LAY-app-contlist-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> 搜索
                        </button>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm12" style="padding:30px 0;border-bottom:1px solid #e8e8e8;">
                        <div class="layui-col-sm6 layui-col-md3">
                            <div class="layui-card layui-card1 first">
                                <div class="layui-card-header title">
                                    应收金额（元）
                                    <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-rmb" style="font-size:18px;"></i></span>
                                </div>
                                <div class="layui-card-body layuiadmin-card-list">
                                    <p class="layuiadmin-big-font" id="yingshou"></p>
                                    <p>
                                        &nbsp;
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-md3">
                            <div class="layui-card layui-card1 second">
                                <div class="layui-card-header title">
                                    未交金额（元）
                                    <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-rmb" style="font-size:18px;"></i></span>
                                </div>
                                <div class="layui-card-body layuiadmin-card-list">
                                    <p class="layuiadmin-big-font" id="weijiao"></p>
                                    <p>
                                        &nbsp;
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-md3">
                            <div class="layui-card layui-card1 third">
                                <div class="layui-card-header title">
                                    已交金额（元）
                                    <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-rmb" style="font-size:18px;"></i></span>
                                </div>
                                <div class="layui-card-body layuiadmin-card-list">
                                    <p class="layuiadmin-big-font" id="yijiao"></p>
                                    <p>
                                        &nbsp;
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-md3">
                            <div class="layui-card layui-card1 forth">
                                <div class="layui-card-header title">
                                    退费金额（元）
                                    <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-rmb" style="font-size:18px;"></i></span>
                                </div>
                                <div class="layui-card-body layuiadmin-card-list">
                                    <p class="layuiadmin-big-font" id="tuifei"></p>
                                    <p>
                                        &nbsp;
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="layui-card-body">
                <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['table','laydate','form'],function () {
        var $ = layui.$
            ,table = layui.table
            ,laydate = layui.laydate
            ,form = layui.form;


        laydate.render({
            elem: '#pay_range', //指定元素
            type: 'month',
            range: '~',
            trigger:'click'
        });

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function(data){
            var field = data.field;
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field
                ,page:1
            });
        });


        table.render({
            elem: '#LAY-app-content-list'
            ,url: "{:url('statistic/fee')}"
            // ,totalRow: true //开启合计行
            ,cols: [[
                 {field: 'item_alias',  title: '缴费项',totalRowText: '合计：'}
                 ,{field: 'yingshou',  title: '应收金额（元）', totalRow: true}
                 ,{field: 'weijiao',  title: '未交金额（元）', totalRow: true}
                 ,{field: 'yijiao',  title: '已交金额（元）', totalRow: true}
                 ,{field: 'tuifei',  title: '退费金额(元)', totalRow: true}
            ]],done: function(res, curr, count){
                var total = res.total;
                $('#yingshou').text(total.yingshou);
                $('#weijiao').text(total.weijiao);
                $('#yijiao').text(total.yijiao);
                $('#tuifei').text(total.tuifei);
            }
            ,page: true
        });
    });

</script>
